import React from 'react'
import { BrowserRouter, Switch, Route, NavLink, Redirect } from 'react-router-dom'
import { routeConfig } from './RouterConfig'
const { admin, login } = routeConfig
function Admin({ match }) {
    return <div>
        <header style={{ border: '1px solid gray', padding: 20 }}>
            <NavLink to={match.url + `/pageA`} >pageA</NavLink>
            <span style={{ display: 'inline-block', width: 50 }}></span>
            <NavLink to={match.url + `/pageB`} >pageB</NavLink>
        </header>
        <main>
            <Switch>
                <Route path={match.url + `/pageA`} component={UserPageA} />
                <Route path={match.url + `/pageB`} component={UserPageB} />
                <Redirect to={match.url + `/pageA`} />
            </Switch>
        </main>
    </div>
}

function Login() {
    return <div>登录页</div>
}

function UserPageA() {
    return <div>UserPageA</div>
}

function UserPageB() {
    return <div>UserPageB</div>
}

export default function App() {
    return (
        <BrowserRouter>
            <div style={{ padding: 20 }}>
                <NavLink to={admin.root} >admin</NavLink>
                <span style={{ display: 'inline-block', width: 50 }}></span>
                <NavLink to={login.root} >login</NavLink>
            </div>
            <Switch>
                <Route path={admin.root} component={Admin} />
                <Route path={login.root} exact component={Login} />
            </Switch>
        </BrowserRouter>
    )
}
